<template>
  <d2-container>
    <div class="flex-1 ml-2 mt-3">
      <div class="flex-1 row-ac">
        <div class="row-ac">
          <div class="font-s-2 text-light-grey mr-1">订单查询</div>
          <div>
            <el-input size="mini" v-model="queryInfo.sub_order_number" placeholder="请输入订单"></el-input>
          </div>
        </div>
        <div class="row-ac ml-5">
          <div class="">
            <el-date-picker size="mini" v-model="getDate" type="date" placeholder="选择日期" />
          </div>
        </div>
        <div class="ml-2">
          <el-button size="mini" type="primary" @click="clickQuery">查询</el-button>
        </div>
      </div>
    </div>
    <div class="flex-1 ml-2 mt-5">
      <el-table :data="orderList" border stripe>
        <el-table-column type="expand" width="30">
          <template slot-scope="props">
            <div class="flex-1 mx-3">
              <el-form label-position="left" inline class="demo-table-expand">
                <el-form-item label="订单编号">
                  <span>{{ props.row.sub_order_number }}</span>
                </el-form-item>
                <el-form-item label="所属店铺">
                  <span>{{ props.row.merchant_name }}</span>
                </el-form-item>
                <el-form-item label="订单ID">
                  <span>{{ props.row.id }}</span>
                </el-form-item>
                <el-form-item label="联系人">
                  <span>{{ props.row.order.consignee }}</span>
                </el-form-item>
                <el-form-item label="联系电话">
                  <span>{{ props.row.order.phone }}</span>
                </el-form-item>
                <el-form-item label="收货地址">
                  <span>{{ props.row.order.address }}</span>
                </el-form-item>
                <el-form-item label="下单时间">
                  <span>{{ props.row.created_time }}</span>
                </el-form-item>
                <el-form-item label="付款状态">
                  <template slot-scope="scope">
                    <el-tag v-if="props.row.order.is_paid == false " size="mini" type="danger" effect="dark">未付款</el-tag>
                    <el-tag v-if="props.row.order.is_paid == true" size="mini" type="success" effect="dark">已付款</el-tag>
                  </template>
                </el-form-item>
                <el-form-item label="发货状态" v-if="props.row.paid == true">
                  <el-tag v-if="props.row.freight_stata == false" type="danger">未发货</el-tag>
                  <el-tag v-if="props.row.freight_stata == true" type="success">已发货</el-tag>
                </el-form-item>
                <el-form-item label="开具发票">
                  <el-tag v-if="props.row.order.is_bill == false" type="success">不开发票</el-tag>
                  <el-tag v-if="props.row.order.is_bill == true" type="danger">开发票</el-tag>
                </el-form-item>
              </el-form>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="订单编号" prop="sub_order_number" width="130" />
        <el-table-column align="center" label="订单总价" prop="sub_order_amount" width="70" />
        <el-table-column align="center" label="下单时间" prop="created_time" width="100" />
        <el-table-column align="center" label="付款状态" prop="is_paid" width="70">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.order.is_paid == false" size="mini" type="danger" effect="dark">未付款</el-tag>
            <el-tag v-if="scope.row.order.is_paid == true" size="mini" type="success" effect="dark">已付款</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="180">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" v-if="scope.row.order.is_paid == true && scope.row.freight_stata == false"
              @click="sendOut(scope.row)">去发货</el-button>
            <el-button size="mini" type="success" v-if="scope.row.freight_stata == true"
              @click="sendOut(scope.row)">发货详情</el-button>
            <el-button size="mini" type="danger" v-if="scope.row.order.is_paid == false"
              @click="handleDelete(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="flex-1 ml-2 mt-2">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page.sync="queryInfo.page" layout="total, prev, pager, next" :total="orderTotal">
        </el-pagination>
      </div>
    </div>
    <el-dialog :visible.sync="dialogSendOutVisible" width="50%">
      <div class="flex-1 mx-2">
        <div class="flex-1 pb-3">
          <div class="flex-1 d-f">
            <div class="row-ac flex-1">
              <div class="font-s-2 text-light-grey row-ac" style="width: 88px;">订单号:</div>
              <div class="font-s-2  ">{{ orderDetail.sub_order_number }}</div>
            </div>
            <div class="row-ac flex-1">
              <div class="font-s-2 text-light-grey row-ac" style="width: 88px;">下单时间:</div>
              <div class="font-s-2  ">{{ orderDetail.created_time }}</div>
            </div>
          </div>
          <div class="flex-1 d-f mt-1">
            <div class="row-ac flex-1">
              <div class="font-s-2 text-light-grey row-ac" style="width: 88px;">订单金额:</div>
              <div class="font-s-2  ">￥{{ orderDetail.sub_order_amount }}</div>
            </div>
            <div class="row-ac flex-1">
              <div class="font-s-2 text-light-grey row-ac" style="width: 88px;">是否开票:</div>
              <div class="font-s-2">
                <el-tag v-if="superiorOrder.is_bill == false" type="success">不开发票</el-tag>
                <el-tag v-if="superiorOrder.is_bill == true" type="danger">开发票</el-tag>
              </div>
            </div>
          </div>
        </div>
        <div class="font-s-2 font-w pb-2">订单商品</div>
        <el-table :data="orderDetail.sub_items" stripe>
          <el-table-column label="图片" prop="product" width="60">
            <template slot-scope="scope">
              <el-popover placement="right" trigger="hover"
                v-if="scope.row.product.image_list && scope.row.product.image_list !== '' && scope.row.product.image_list[0]">
                <el-image slot="reference" style="width: 40px; height: 40px" :src="scope.row.product.image_list[0].url"
                  fit="cover" />
                <el-image style="width: 220px; height: 220px" :src="scope.row.product.image_list[0].url"
                  fit="contain" />
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column label="商品名称" prop="product.product_name" width="220" />
          <el-table-column align="center" label="订单数量" prop="quantity" width="60" />
        </el-table>
      </div>
      <div class="flex-1 mx-2 py-2">
        <div class="flex-1 pb-2">收货信息</div>
        <div class="pb-2 flex-1 d-f">
          <div class="d-f">
            <div class="font-s-2">收货人: {{ superiorOrder.consignee }}</div>
          </div>
          <div class="d-f ml-2">
            <div class="font-s-2">联系电话: {{ superiorOrder.phone }}</div>
          </div>
          <div class="d-f ml-2">
            <div class="font-s-2">收货地址: {{ superiorOrder.address }}</div>
          </div>
        </div>
        <div class="flex-1 pb-2">快递信息</div>
        <div class="flex-1 row-ac">
          <div style="width: 30%;">
            <el-select v-model="formSendOut.freight_company" placeholder="选择快递">
              <el-option v-for="item in freightCompany" :key="item.value" :label="item.name"
                :value="item.name"></el-option>
            </el-select>
          </div>
          <div style="width: 50%;">
            <el-input v-model="formSendOut.freight_number" placeholder="请输入快递单号"></el-input>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogSendOutVisible = false">取 消</el-button>
        <el-button type="primary" @click="sendOutGoods(orderDetail.id)">确 定</el-button>
      </div>
    </el-dialog>
  </d2-container>
</template>

<script>
  import {
    suborderListUrl,
    suborderDetailUrl,
    suborderPatchUrl
  } from "@/utils/product"
  import util from '@/libs/util.js'
  export default {
    data() {
      return {
        queryInfo: {
          merchant_id: util.cookies.get('merchantId'),
          date: '',
          sub_order_number: '',
          page: 1,
          pageSize: 10
        },
        orderList: [],
        orderTotal: 1,
        getDate: '',
        dialogSendOutVisible: false,
        orderDetail: '',
        superiorOrder:'',
        formSendOut: {
          freight_stata: true,
          freight_company: '',
          freight_number: ''
        },
        freightCompany: [{
            value: 1,
            name: '邮政快递'
          },
          {
            value: 2,
            name: 'EMS'
          },
          {
            value: 3,
            name: '顺丰速度'
          },
          {
            value: 4,
            name: '申通快度'
          },
          {
            value: 5,
            name: '圆通快递'
          },
          {
            value: 6,
            name: '中通快递'
          },
          {
            value: 7,
            name: '韵达快递'
          },
          {
            value: 8,
            name: '极兔快递'
          },
          {
            value: 9,
            name: '百世快递'
          },
        ]
      }
    },
    created() {
      this.getOrderList()
    },
    computed: {
      formattedDate() {
        if (this.getDate) {
          return dateObject.toLocaleDateString('zh-CN', {
            year: 'numeric',
            month: '2-digit',
            day: '2-digit'
          }).replace(/\//g, '-')
        }
        return null
      }
    },
    methods: {
      clickQuery() {
        this.queryInfo.date = this.formattedDate
        console.log(this.queryInfo.date);
        this.getOrderList()
      },
      getOrderList() {
        this.$get(suborderListUrl, this.queryInfo).then(res => {
          if (res.data.code == 200) {
            this.orderList = res.data.data.list
            this.orderTotal = res.data.data.total
          }
        })
      },
      // 分页页码显示条数
      handleSizeChange(newSize) {
        // 把每页显示多少数据重新赋值
        this.queryInfo.pageSize = newSize
        this.getOrderList()
      },
      // 翻页事件
      handleCurrentChange(newPage) {
        this.queryInfo.page = newPage
        this.getOrderList()
      },
      handleDelete(orderId) {
        this.$confirm('此操作将永久删除该分类, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$del(orderDeleteUrl + orderId + '/').then(res => {
            if (res.data.code == 200) {
              this.getOrderList()
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        })
      },
      sendOut(item) {
        this.dialogSendOutVisible = true
        this.$get(suborderDetailUrl + item.id + '/').then(res => {
          if (res.data.code == 200) {
            this.orderDetail = res.data.data
            this.superiorOrder = res.data.data.order
            console.log('获取子订单详情', this.orderDetail);
            this.formSendOut = {
              freight_company: res.data.data.freight_company,
              freight_number: res.data.data.freight_number
            }
          }
        })
      },
      sendOutGoods(orderId) {
        this.formSendOut.freight_stata = true
        this.$patch(suborderPatchUrl + orderId + '/', this.formSendOut).then(res => {
          if (res.data.code == 200) {
            this.$message({
              type: 'success',
              message: '发货成功!'
            })
            this.formSendOut = {}
            this.dialogSendOutVisible = false
            this.getOrderList()
            console.log(res.data);
          }
        })
      }
    },
  }
</script>

<style>
  .demo-table-expand {
    margin-left: 35px;
  }

  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }

  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 30%;
  }
</style>
